<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="shortcut icon" href="./favicon.png" type="image/x-icon">
    <script src="./js/vue@2.js"></script>
    <title>Goodlifestylenow</title>
</head>

<body>
    <div id="app" v-cloak>
        <a-header></a-header>
        <main>
            <div class="content">
                <div class="content-wrapper">
                    <div class="content-wrapper-main">
                        <section>
                            <div class="top-wrapper">
                                <div class="news" :class="{big: index === 0}" v-for="(news, index) in hot"
                                    :key="news.id">
                                    <a :href="useToDetail(news.id)">
                                        <img class="news-poster" :src="news.img" loading="lazy" :alt="news.title"
                                            width="260">
                                        <div class="">
                                            <span class="news-type">{{news.name}}</span>
                                            <h2 class="news-title">{{news.title}}</h2>
                                            <p class="news-sub" v-if="index === 0">{{news.information}}</p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </section>

                        <section>
                            <div class="col-wrapper">
                                <div class="col">
                                    <a class="col-news" :href="useToDetail(news.id)" v-for="(news, index) in longOne"
                                        :key="news.id">
                                        <img v-if="index === 0" class="col-news_poster" :src="news.img" loading="lazy"
                                            :alt="news.title" width="260">
                                        <p class="col-news_title">{{news.title}}</p>
                                    </a>
                                </div>
                                <div class="col">
                                    <a class="col-news" :href="useToDetail(news.id)" v-for="(news, index) in longTwo"
                                        :key="news.id">
                                        <img v-if="index === 0" class="col-news_poster" :src="news.img" loading="lazy"
                                            :alt="news.title" width="260">
                                        <p class="col-news_title">{{news.title}}</p>
                                    </a>
                                </div>
                                <div class="col">
                                    <a class="col-news" :href="useToDetail(news.id)" v-for="(news, index) in longThree"
                                        :key="news.id">
                                        <img v-if="index === 0" class="col-news_poster" :src="news.img" loading="lazy"
                                            :alt="news.title" width="260">
                                        <p class="col-news_title">{{news.title}}</p>
                                    </a>
                                </div>
                            </div>
                        </section>
                    </div>
                    <div class="content-wrapper-side">
                        <div class="content-wrapper-side-news">
                            <h5>TRENDING ARTICLES</h5>
                            <ul class="side-list">
                                <li v-for="(news, index) in side" :key="news.id">
                                    <div class="corner">{{index+1}}</div>
                                    <a class="side-list-item" :href="useToDetail(news.id)">
                                        <img class="side-news-poster" :src="news.img" :alt="news.title">
                                        <p class="side-news-title">{{news.title}}</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <!-- <div class="content-wrapper-side-ad">
                            <div class="ad">
                                <div class="ad-wrapper">

                                </div>
                            </div>
                        </div> -->
                    </div>
                </div>
            </div>
        </main>
        <a-footer></a-footer>
    </div>
</body>
<script src="./main.js"></script>
<script type="module">
    import { header, footer } from './components/index.js'
    var vm = new Vue({
        el: '#app',
        components: {
            aHeader: header,
            aFooter: footer
        },
        data() {
            return {

                hot: [],
                long: [],
                side: [],
            }
        },
        computed: {
            longOne() {
                return this.long.slice(0, 5)
            },
            longTwo() {
                return this.long.slice(5, 10)
            },
            longThree() {
                return this.long.slice(10, 15)
            }
        },
        created() {
            this.handleFetchNewsList()
        },
        methods: {
            useToDetail,
            handleFetchNewsList() {
                fetch('https://migame.vip/gamefront/blog/blogApiList', {
                    headers: {
                        'Content-Type': 'application/json; charset=utf-8'
                    },
                    method: 'post',
                    body: JSON.stringify({
                        pageNum: 1,
                        pageSize: 33,
                        siteId,
                    })
                })
                    .then(res => res.json())
                    .then(res => {
                        if (res.code == 0) {
                            this.hot = res.data.splice(0, 13)
                            this.side = res.data.splice(0, 5)
                            this.long = res.data
                        }
                    })
                    .catch(err => {
                        throw new Error(err)
                    })
            }
        }
    })
</script>

</html>